<template>
	<view v-if="visible" class="page">
		<cus-navbar id="navbar" title="" titleColor="#fff" bgColor="transparent" @back="hide"></cus-navbar>
		<view class="top-box" :style="{paddingTop:`${navbarH}px`,marginTop:`-${navbarH}px`}">
			<image class="default-cover cover" :src="detail.cover" mode="scaleToFill" @tap="prompthandle"></image>
			<view class="book-name" @tap="prompthandle">
				<text>{{bookName}}</text>
				<text class="iconfont icon-jinrujiantou"></text>
			</view>
			<view class="chapter-name" @tap="prompthandle">{{chapterName}}</view>
			<view class="schedule-box">
				<view class="rate"></view>
				<span class="time" @tap="prompthandle">{{'10:40'}}/{{'12:11'}}</span>
			</view>
		</view>
		<view class="button-box">
			<button @tap="prompthandle"><text class="iconfont icon-step-backward side"></text></button>
			<!-- <button><text class="iconfont icon-pausecircle-fill center"></text></button> -->
			<button @tap="prompthandle"><text class="iconfont icon-playcircle-fill center"></text></button>
			<button @tap="prompthandle"><text class="iconfont icon-step-forward side"></text></button>
		</view>
		<view class="button-box">
			<button @tap="prompthandle">
				<text class="iconfont icon-xiazai1 sub-icon"></text>
				<text class="sub-text">下载</text>
			</button>
			<button @tap="prompthandle">
				<text class="iconfont icon-shu sub-icon"></text>
				<text class="sub-text">加入书架</text>
			</button>
			<button @tap="prompthandle">
				<text class="iconfont icon-xianshishijian sub-icon"></text>
				<text class="sub-text">定时</text>
			</button>
			<button @tap="prompthandle">
				<text class="iconfont icon-kuaisushezhi sub-icon"></text>
				<text class="sub-text">语速</text>
			</button>
			<button @tap="prompthandle">
				<text class="iconfont icon-menu sub-icon"></text>
				<text class="sub-text">658章</text>
			</button>
		</view>
		<view class="bottom-btn">
			<button @tap="prompthandle">
				<text class="dot">AI朗读</text>
				<text>成熟大叔音</text>
				<text class="iconfont icon-jinrujiantou"></text>
			</button>
			<button @tap="prompthandle">阅读原文</button>
		</view>
	</view>
	<!-- 	<view id="_drag_button" class="drag text-sm flex justify-start align-center"
		:style="'left:'+left+'px;top:'+top+'px;'" @click.stop.prevent="click" @touchmove.stop.prevent="touchmove"
		@touchend="touchend"
		:class="[!isMove?'transition':'', open?'margin-left animation-slide-left':'animation-slide-right']">
		<view v-if="open" class="flex justify-start align-center openDrag">
			<view class="audio-title margin-lr-sm">
				<view id="title" class="animation" :style="{animationDuration: `${animateDuration}s`}">{{title}}</view>
			</view>
			<view class="iconfont margin-lr-sm" :class="pause?'icon-kaishi':'icon-zantingtingzhi'" @tap="tapPause">
			</view>
			<view class="cuIcon-close margin-lr-sm" @tap="tapClose"></view>
		</view>
		<view v-else class="cuIcon-right margin-lr-xs padding-left-sm" @tap="tapOpen"></view>
	</view> -->
</template>

<script>
	export default {
		props: {
			bookId: {
				type: String,
				default: ''
			},
			bookName: {
				type: String,
				default: ''
			},
			chapterName: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			styleBottom: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				navbarH: this.$NavBar,
				visible: false,
				promptList: ['呀！不能用', '咦？还是不行', '哈哈哈哈哈，这个也不行', '没想到吧，都不行！'],
				promptIndex: 0,
				// open: true,
				// top: 0,
				// left: 0,
				// width: 0,
				// height: 0,
				// offsetWidth: 0,
				// offsetHeight: 0,
				// windowWidth: 0,
				// windowHeight: 0,
				// isMove: true,
				// edge: 10,
				// pause: false,

				// audioPlay: false,
				// audio: [],
				// curAudio: null,
				// audioIndex: 0,

				// animateDuration: 4,
			}
		},
		computed: {
			detail() {
				let readHistorys = this.$store.getters.get_readHistorys
				let idx = readHistorys.findIndex(item => item._id === this.bookId)
				return readHistorys[idx]
			}
		},
		mounted() {
			// const sys = uni.getSystemInfoSync();
			// this.windowWidth = sys.windowWidth;
			// this.windowHeight = sys.windowHeight;

			// if (sys.windowTop) {
			// 	this.windowHeight += sys.windowTop;
			// }
			// this.getComponentHeight();
			// this.toRead();
			// this.tapOpen();
		},
		beforeDestroy() {
			this.hide()
			// this.tapClose();
		},
		methods: {
			show() {
				this.visible = true
			},
			hide() {
				this.visible = false
			},
			prompthandle() {
				uni.hideToast()
				uni.showToast({
					icon: 'none',
					title: this.promptList[this.promptIndex % 4]
				})
				this.promptIndex += 1
			}
			// getComponentHeight() {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('#_drag_button').boundingClientRect(data => {
			// 		if (data != null) {
			// 			this.width = data.width;
			// 			this.height = data.height;
			// 			this.offsetWidth = data.width / 2;
			// 			this.offsetHeight = data.height / 2;
			// 			this.top = this.windowHeight - this.height - this.edge - this.styleBottom;
			// 		}
			// 	}).select('#title').boundingClientRect(data => {
			// 		if (data.width > 159) { //计算文本长度
			// 			this.animateDuration = (4 * data.width / 159).toFixed(2) //动画过渡时间
			// 			console.log(this.animateDuration)
			// 		}
			// 	}).exec();
			// },
			// toRead() {
			// 	this.audioPlay = !this.audioPlay;

			// 	console.log(this.audioPlay)
			// 	if (this.audioPlay) {
			// 		let content = this.content.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, '')
			// 		this.audio = [this.title, ...content.split('。')]
			// 		this.subFunc();
			// 	} else {
			// 		this.curAudio.pause()
			// 	}
			// },
			// async subFunc() {
			// 	if (this.audioIndex < this.audio.length) {
			// 		this.curAudio = await this.$Voice({
			// 			voiceSet: {
			// 				tex: this.audio[this.audioIndex]
			// 			},
			// 			returnAudio: true
			// 		})
			// 		this.curAudio.onPlay(() => {
			// 			console.log('音频开始播放了')
			// 		})
			// 		this.curAudio.play();
			// 		this.curAudio.onEnded(() => {
			// 			this.curAudio = null;
			// 			this.audioIndex++;
			// 			this.subFunc();
			// 		})
			// 	} else {
			// 		this.tapClose();
			// 	}
			// },
			// click() {
			// 	this.$emit('btnClick');
			// },
			// touchmove(e) {
			// 	// 单指触摸
			// 	if (e.touches.length !== 1) {
			// 		return false;
			// 	}

			// 	this.isMove = true;

			// 	let clientY = e.touches[0].clientY - this.offsetHeight;
			// 	// #ifdef H5
			// 	clientY += this.height;
			// 	// #endif
			// 	let edgeBottom = this.windowHeight - this.height - this.edge - this.styleBottom;

			// 	// 上下触及边界
			// 	if (clientY < this.edge) {
			// 		this.top = this.edge;
			// 	} else if (clientY > edgeBottom) {
			// 		this.top = edgeBottom;
			// 	} else {
			// 		this.top = clientY;
			// 	}

			// },
			// touchend(e) {
			// 	this.isMove = false;
			// },
			// tapOpen() {
			// 	this.open = true;

			// 	setTimeout(() => {
			// 		this.open = false;
			// 	}, 5000)
			// },
			// tapPause() {
			// 	this.pause = !this.pause;

			// 	if (this.pause) {
			// 		this.curAudio.pause();
			// 	} else {
			// 		this.curAudio.play();
			// 	}
			// },
			// tapClose() {
			// 	if (this.curAudio) {
			// 		this.curAudio.stop();
			// 		this.curAudio.destroy();
			// 		this.curAudio = null;
			// 		this.animationData = {}

			// 		// 为了在每个页面都可以监听语音播报悬浮窗
			// 		this.$set(this.$audioDrag, 'show', false)
			// 		this.$set(this.$audioDrag, 'title', null)
			// 		this.$set(this.$audioDrag, 'content', null)
			// 	}
			// },
		}
	}
</script>

<style lang="scss">
	.page {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1024;
		background-color: #405568;


		.top-box {
			color: #FFFFFF;
			background-color: #586A78;

			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;

			.cover {
				margin-top: 24px;
				width: 115px;
				height: 163px;
				border-radius: 4px;
			}

			.book-name {
				margin-top: 12px;
				color: #B8C9D0;
				font-size: 14px;
				line-height: 16px;

				text {
					display: inline-block;
					vertical-align: middle;
				}
			}

			.chapter-name {
				margin-top: 15px;
				font-size: 18px;
				font-weight: bold;
			}

			.schedule-box {
				position: relative;
				margin-top: 24px;
				width: 100%;
				height: 1px;
				background-color: #94A1AA;

				.rate {
					width: 80%;
					height: 1px;
					background-color: #FFFFFF;
				}

				.time {
					position: absolute;
					left: 80%;
					height: 20px;
					line-height: 20px;
					padding: 0 7px;
					border-radius: 13px;
					background-color: #FEFEFF;
					color: #8D8D8F;
					font-size: 9px;
					transform: translate(-50%, -50%);
				}
			}
		}

		.button-box {
			margin-top: 24px;
			width: 100%;

			display: flex;
			justify-content: space-around;
			align-items: center;

			button {
				line-height: 1;
				background-color: transparent;

				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				text {
					color: #FFFFFF;
					white-space: nowrap;
				}

				.side {
					font-size: 34px;
				}

				.center {
					font-size: 63px;
				}

				.sub-icon {
					font-size: 24px;
					color: #CBD8E2;
				}

				.sub-text {
					margin-top: 6px;
					font-size: 12px;
					color: #CBD8E2;
				}
			}
		}

		.bottom-btn {
			margin-top: 27px;

			display: flex;
			justify-content: space-around;
			align-items: center;



			button {
				$color: #FFFFFF;

				height: 40px;
				padding: 0 20px;
				color: $color;
				background-color: #546776;
				font-size: 14px;
				border-radius: 40px;

				display: flex;
				justify-content: center;
				align-items: center;

				.dot {
					position: relative;
					padding-right: 17px;

					&::after {
						content: "";
						position: absolute;
						top: 50%;
						right: 6px;
						width: 3px;
						height: 3px;
						background-color: $color;
						border-radius: 50%;
					}
				}

				.icon-jinrujiantou {
					margin-left: 20px;
				}
			}
		}
	}

	// .drag {
	// 	background-color: rgba(0, 0, 0, 0.5);
	// 	box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.4);
	// 	color: $uni-text-color-inverse;
	// 	height: 100rpx;
	// 	position: fixed;
	// 	z-index: 999999;

	// 	&.transition {
	// 		transition: left .3s ease, top .3s ease;
	// 	}

	// 	.audio-title {
	// 		width: 300rpx;
	// 		max-width: 300rpx;
	// 		overflow: hidden;
	// 		white-space: nowrap;

	// 		.animation {
	// 			display: inline-block;
	// 			white-space: nowrap;
	// 			animation: 5s wordsLoop linear 0s infinite;
	// 		}

	// 		@keyframes wordsLoop {
	// 			from {
	// 				transform: translateX(300rpx)
	// 			}

	// 			to {
	// 				transform: translateX(calc(-100%))
	// 			}
	// 		}
	// 	}

	// 	.openDrag {
	// 		animation: dragShow 1s forwards;
	// 	}

	// 	@keyframes dragShow {
	// 		to {
	// 			visibility: visible;
	// 			opacity: 1;
	// 			transform: translateX(0);
	// 		}
	// 	}
	// }
</style>
